<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 让布局的width=设备的width -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 2rem;
            height: 50px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div>

    </div>
    <script>
        // px,%,rem 所谓rem是相对根元素(html)的font-size而言的
        // html.font-size=12px 1rem=16px
        // 10rem
        // 1.获取布局的width
        /* var width = window.innerWidth;
        var html = document.getElementsByTagName("html")[0];
        html.style.fontSize = width / 10 + "px";
        window.onresize = function(){
            var width = document.documentElement.clientWidth;// 获取屏幕宽度
            html.style.fontSize = width/10+"px";
        } */

        //100rem
        var width = document.documentElement.clientWidth;
        var rem = width/100+"px";

        var html = document.getElementsByTagName("html")[0]
        html.style.fontSize = rem
        window.onresize = function (){
            var width = document.documentElement.clientWidth;
            var rem = width/100+"px";
            html.style.fontSize = rem
        }
    </script>
</body>
<html>